<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <style>
        .transition-3d-hover {
            transition: all .2s ease-in-out
        }
        .transition-3d-hover:hover,.transition-3d-hover:focus {
            -webkit-transform: translateY(-3px);
            transform: translateY(-3px)
        }
    </style>
    <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">

    <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0 d-flex align-items-lg-center">
                <li class="nav-item">
                    <a class="nav-link d-flex align-items-center"  href="resume" target="_blank">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down me-2" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
                        </svg>
                        简历</a>
<!--                    <a href="resume" target="_blank">查看我的简历</a>-->
                </li>
                <li class="nav-item">
                    <a class="nav-link d-flex align-items-center" href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-app me-2" viewBox="0 0 16 16">
                            <path d="M11 2a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3zM5 1a4 4 0 0 0-4 4v6a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4V5a4 4 0 0 0-4-4z"/>
                        </svg>
                        博客</a>
                </li>
                <li class="nav-item">
                    <a class="btn-sm btn btn-primary transition-3d-hover" href="#" role="button">登录</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="text-center mt-5">
    <h1 class="animate__animated animate__swing animate__delay-4s">myWeb</h1>
    <!--        <P id="sb" class="text-secondary">hi帅哥,Ask you to study hard</P>-->
    <div id="typed-strings">
        <p class="site-subtitle lead text-muted">用简短的一段描述介绍自己的网站</p>
    </div>
    <span class="site-subtitle lead text-muted" id="typed"></span>
</div>


<div class="text-center mt-5">
    <div class="mb-5" data-aos="flip-up">
        <img src="sight1.jpg" height="300" >
    </div>
    <div class="mb-5" data-aos="fade-down-left">
        <img src="sight1.jpg" height="300" >
    </div>
    <div class="mb-5" data-aos="flip-left">
        <img src="sight1.jpg" height="300" >
    </div>
</div>



<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
<!-- Setup and start animation! -->
<script>
    const options = {
        stringsElement: '#typed-strings',
        startDelay: 300,
        typeSpeed: 150
    };
    if (document.getElementById("typed-strings")) {
        new Typed("#typed", options);
    }
</script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init();
</script>
</body>
</html>